
import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
class TextInput extends Component {
    //在创建类组件实例的时候，也创建一个ref对象，并赋给当前类的实例的this.htmlInputRef={current:null}
    htmlInputRef = React.createRef()
    getFocus = ()=>{
        //调用原生的DOM元素上的focus方法，用来获得焦点
        this.htmlInputRef.current.focus();
    }
    render() {
        //把this.htmlInputRef通过ref属性传递给此input,那么当此input转成真实DOM后，会把真实DOM的引用地址传给
        //this.htmlInputRef.current=input的真实DOM
        return <input ref={this.htmlInputRef} />
    }
}
class Form extends Component {
     //创建一个ref对象，并且赋给textInputRef属性
    textInputRef = React.createRef();//{current:null}
    getFocus = () => {
        //如果给类组件添加ref属性，那么当类组件实例成功后，会把类组件的实例赋给this.textInputRef.current
        //就可以调用TextInput类组件实例上的getFocus方法
        this.textInputRef.current.getFocus();
    }
    render() {
        return (
            <div>
                <TextInput ref={this.textInputRef} />
                <button onClick={this.getFocus}>获取焦点</button>
            </div>
        )
    }
}
let element = <Form />
root.render(element);